<template>
    <div class="login_box">
        <div class="avatar">
            <img :src="avatar" />
        </div>
        <el-input
            v-model="login_data.account"
            autocomplete="new-password"
            placeholder="账号"
            :spellcheck="false"
            @change="account_input_change"
            @keyup.enter="login_click" />
        <el-input
            v-model="login_data.password"
            autocomplete="new-password"
            name="login_pwd"
            type="password"
            placeholder="密码"
            show-password
            :spellcheck="false"
            @change="password_input_change"
            @keyup.enter="login_click" />
        <div class="login">
            <el-button @click="login_click">登录</el-button>
        </div>
        <div class="bottom_navigation">
            <span @click="go_register_click">注册</span>
            <span @click="forgot_password_click">忘记密码?</span>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { login } from '@/axios/home';
import router from '@/router/index';
import { useIndexStore } from '@/store/model/index';

const store = useIndexStore();

const login_data = reactive({
    account: null,
    password: null,
});
const avatar = ref(require('@/assets/img/mrtx.webp'));

const account_input_change = () => {};
const password_input_change = () => {};
const login_click = async () => {
    let login_res = await login({
        user_name: login_data.account,
        user_pwd: login_data.password,
    });
    if (login_res.code === 200) {
        avatar.value = login_res.data.user_img;
        if (login_res.data.is_administrators) {
            store.update_user_info({
                user_name: login_res.data.user_name,
                user_img: login_res.data.user_img,
                user_permissions: 0b111,
                user_id: login_res.data.id,
            });
        } else {
            store.update_user_info({
                user_name: login_res.data.user_name,
                user_img: login_res.data.user_img,
                user_permissions: 0b011,
                user_id: login_res.data.id,
            });
        }
        router.push('/index');
    }
};
const go_register_click = () => {
    router.push(`/admin/register`);
};
const forgot_password_click = () => {
};
</script>

<style lang="less" scoped>
.login_box {
    width: 320px;
    font-size: 0px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid @tml;
    background-color: rgba(244, 244, 244, 0.3);
    padding: 10px;

    .avatar {
        width: 100%;
        display: flex;
        justify-content: center;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    }

    :deep(.el-input) {
        margin: 10px 0;

        .el-input__wrapper {
            background-color: @tmb;
            box-shadow: 0 0 0 0;
        }
    }
    .login {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .bottom_navigation {
        width: 100%;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 900;
        color: @hs;
        display: flex;
        justify-content: space-between;
        span {
            cursor: pointer;
        }
    }
}
</style>
